<template>
	<div
		:style="{
			'grid-template-columns': `repeat(${column},1fr)`
		}"
		class='commodities'
	>
		<div
			class="item"
			v-for="item in commodities.filter(item => item.type === commoditiesType)"
			:key="item.id"
			@click="item.cb && item.cb()"
		>
			<img :src="item.img">
			<div class="name">
				<span>{{item.name}}</span>
				<Iconfont
					name="icon-a-Vector3"
					color="#33D4BA"
					size="20"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import commodities from '@/mock/commodities'
export default {
  props: {
    column: {
      type: Number,
      default: 4
    },
    commoditiesType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      commodities
    }
  },
}
</script>

<style lang='scss' scoped>
.commodities {
  display: grid;
  grid-gap: 30px;

  img {
    width: 100%;
  }

  .name {
    display: flex;
    margin-top: 20px;

    span {
      flex: 1;
    }

    i {
      cursor: pointer;
    }
  }
}
</style>
